<template>
    <div class="hot-nav">
        <div class="nav-container">
            <div class="nav-content">
                <a class="nav-item" v-for="(nav,index) in homenav" :key="index">
                    <img :src="nav.iconurl">
                    <span>{{nav.icontitle}}</span>
                </a>
            </div>
        </div>
        <!--进度条-->
        <div class="hot-navta">
            <div class="nav-play" :style="bgBarClass"></div>
        </div>
    </div>

</template>

<script>
    import {
        mapState
    } from 'vuex'
    export default {
        name: "Hotnav",
        data(){
            return{
                //屏幕宽
                screenW:window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
                //滑动内容长度
                screenContentW:720,
                //滚动条背景长度
                bgBarW:100,
                //滚顶条
                barX:0,
                //移动起点
                startX:0,
                //移动结束
                endFlag:0,
                //移动距离
                barMoveWitdh:0,
            }
        },
        computed:{
            bgBarClass(){
                return{
                    width:`${this.barX}px`,
                    left:`${this.barMoveWitdh}px`
                }
            },
            ...mapState(['homenav'])
        },
        mounted(){
            this.barXWidth();
            this.barTouch();
        },
        methods:{
            barXWidth(){
                    this.barX= this.bgBarW * (this.screenW /this.screenContentW)
            },
            barTouch(){
                this.$el.addEventListener("touchstart",this.handleTouchStart,false),
                this.$el.addEventListener("touchmove",this.handleTouchMove,false),
                this.$el.addEventListener("touchend",this.handleTouchEnd,false)
            },
            handleTouchStart(event){
                this.startX=event.touches[0].pageX;
            },
            handleTouchMove(){
                let touchXwitdh=event.touches[0].pageX - this.startX;
                this.barMoveWitdh = - ((this.bgBarW/this.screenContentW)* touchXwitdh - this.endFlag);
                if(this.barMoveWitdh<=0){
                    this.barMoveWitdh=0
                }else if(this.barMoveWitdh>=this.bgBarW-this.barX) {
                    this.barMoveWitdh=this.bgBarW-this.barX
                }
            },
            handleTouchEnd(){
                this.endFlag=this.barMoveWitdh
            },
        }
    }
</script>

<style scoped lang="stylus">
    .hot-nav
        width 100%
        height 180px
        background-color #fff
        position relative
        padding-bottom 10px
        margin-bottom 10px
    .nav-container
        width 100%
        overflow-x scroll
        height 180px
        .nav-content
            width 720px
            display flex
            flex-wrap wrap
            .nav-item
                width: 90px
                height: 90px
                display flex
                flex-direction column
                justify-content  center
                align-items center
                color #666
                font-size 14px
                img
                    width 50%
                    margin-bottom 3px
    .nav-container::-webkit-scrollbar
        display none
    .hot-navta
        width: 100px
        height 2px
        background-color: #ccc
        position absolute
        left 50%
        margin-left -50px
        .nav-play
            position absolute
            left 0
            width 30%
            height 100%
            background-color orangered
</style>